let stateAll = false //false未选中 true选中全局变量
let tableEle = document.querySelector('table')
let totalpriceEle = document.querySelector('.total-price>span')//找到给给总价赋值总价的节点
let sum=1
function showProductList() {
    // 永久化存储数据到TABLE
    let prouductListStr = localStorage.getItem('TABLES')
    // 判读原数组是否为空
    let product= JSON.parse(prouductListStr) || []
    
    
    // 拼接字符串头部
    let str = `<tr>
    <td><input type="checkbox" name="checkall" ${stateAll?'checked':''} >全选</td>
    <td>商品ID</td>
    <td>商品图片</td>
    <td>商品信息</td>
    <td>单价</td>
    <td>数量</td>
    <td width="100px">总价</td>
    <td>操作</td>
      </tr>`
   
    

    const trStr =product.map(item=> {
        return `<tr>
        <td><input type="checkbox"  name="checksingle" ${item.state?'checked':''} data-index="${item.id}">单选</td>
        <td>${item.id}</td>
        <td><img src="${item.url}" alt="p1" /></td>
        <td>${item.name}</td>
        <td class="aa" data-index="${item.id}">${item.price} </td>
        <td>
            <input type="button" value="-" name="minus"  data-index="${item.id}" />
            <input type="text" class='cc' value="${item.sum}"    />
            <input type="button" value="+" name="plus" data-index="${item.id}"/>
        </td>
        <td class="all-price">￥${(item.singlePrice).toFixed(2)}</td>
        <td>
            <a href="#">移入收藏</a><br />
            <a href="#" class="del" data-index="${item.id}">删除</a>
        </td>
    </tr>`
    }).join('')

    str += trStr
    tableEle.innerHTML = str
}

/**
 * 添加商品
 *   1. 点击添加按钮
 *   2. 获取表单数据
 *   3. 生成商品对象
 *   4. 商品对象添加到商品数组
 *   5. 重新渲染数据
 *
 */
function addProduct() {

    const form = document.querySelector('form')
    const nameEle = document.querySelector('input[name="name"]')
    const priceEle = document.querySelector('input[name="price"]')
    // const numEle = document.querySelector('input[name="num"]')
    const urlEle = document.querySelector('input[name="url"]')
    //1. 点击添加按钮
    form.addEventListener('submit', function (e) {
        e = e || window.event //事件对象
        e.preventDefault() //阻止默认行为
        //2. 获取表单数据
        let id = getRandom(1000, 10000)
        let name = nameEle.value //商品名称
        let price = priceEle.value //商品价格
        // let num = numEle.value //商品数量
        let url = urlEle.value //商品图片地址

        //3. 生成商品对象
        let product = {
            id,
            name,
            url,
            price,
            sum:0,
            singlePrice: 0,
            state: false, //状态
        }
        //获取数组
        let prouductListStr = localStorage.getItem('TABLES')
        let productList = JSON.parse(prouductListStr) || []
        //4. 商品对象添加到商品数组
        productList.push(product)
         
        //持久化存储
        localStorage.setItem('TABLES', JSON.stringify(productList))
       //5. 重新渲染数据
       onTotalPrice()
       showProductList()
    
        //6.清空表单内容
        nameEle.value = ''
        priceEle.value = ''
        numEle.value = ''
        urlEle.value = ''
    })
}


/**
 * 操作商品
 *   1. 删除商品
 *     1.1 获取删除商品的id
 *     1.2 根据id在商品数组中找到该商品在数组中索引号
 *     1.3 splice(index,1)
 *
 */
function onProduct() {
    tableEle.addEventListener('click', function (e) {
        e = e || window.event
        let target = e.target || e.srcElement //事件目标对象
        //获取数组
        let prouductListStr = localStorage.getItem('TABLES')
        let productList = JSON.parse(prouductListStr) || []
        //删除操作
        if (target.getAttribute('class') == 'del') {

            //1.1 获取删除商品的id
            let id = target.getAttribute('data-index')
            //1.2根据id在商品数组中找到该商品在数组中索引号
            let index = productList.findIndex(item => item.id == id)
            productList.splice(index, 1)
            //持久化存储
            localStorage.setItem('TABLES', JSON.stringify(productList))
            //重新渲染商品列表
            onTotalPrice()
            showProductList()
        }
        //加一
        /**
         *  1. 获取id
         *  2. 找商品对象
         */
        if (target.getAttribute('value') == '+') {
            //获取id
            let id = target.getAttribute('data-index')
            //查找商品
            let product = productList.find(item => item.id == id)
            console.log(product);
            //数量加一
            product.sum++
            //  //求和
            product.singlePrice = (product.sum * product.price)
           
            //持久化存储
            localStorage.setItem('TABLES', JSON.stringify(productList))
            //重新渲染商品列表
            showProductList()
            onTotalPrice()

        }

        //减 一
        /**
         *  1. 获取id
         *  2. 找商品对象
         */
        if (target.getAttribute('value') == '-') {
            //获取id
            let id = target.getAttribute('data-index')
            //查找商品
            let cllduct = productList.find(item => item.id == id)
            //数量加一
            cllduct.sum--
            //小于0时
            if (cllduct.sum < 0) {
                cllduct.sum = 0
            }
            //求和
            cllduct.singlePrice = (cllduct.sum * cllduct.price)
            //持久化存储
            localStorage.setItem('TABLES', JSON.stringify(productList))
            //重新渲染商品列表
            showProductList()
            onTotalPrice()


        }
        // 全选按钮
        if (target.getAttribute('name') == "checkall") {
            // 设置所有商品的状态为ture
            stateAll = !stateAll
            productList.forEach(item => (item.state = stateAll))
            //持久化存储
            localStorage.setItem('TABLES', JSON.stringify(productList))
            //重新渲染商品列表
            onTotalPrice()
            showProductList()

        }
        //单选框
        //点击单选框，判断 所有商品状态 是否选中，选中全选 反之
        if (target.getAttribute('name') == "checksingle") {
            //设置单选框状态
            //找到单选框
            //改变state状态
            let id = target.getAttribute('data-index') //通过id查找
            let product = productList.find(item => item.id == id)
            product.state = !product.state
            stateAll = productList.every(item => item.state == true)
            // product.singlePrice.innerHTML=
            //持久化存储
            localStorage.setItem('TABLES', JSON.stringify(productList))
            //重新渲染商品列表
            onTotalPrice()
            showProductList()
            
            

        }
    })

}

function onTotalPrice() {
    //获取数组
    let prouductListStr = localStorage.getItem('TABLES')
    let productList = JSON.parse(prouductListStr) || []
    var sum = 0 //总价
    //判断单选复选价格
    productList.forEach(item=>{
        if(item.state!==false){
           
            sum +=item.singlePrice
         
        }
      
    })
    totalpriceEle.innerHTML =`￥${sum.toFixed(2)}`
   
    //持久化存储
    localStorage.setItem('TABLES', JSON.stringify(productList))
    
}
function returns(){
    location.href='../pages/index.html'
}

// let but=document.querySelector('.add')
// but.addEventListener('click',function(){
//     let fo = document.querySelector('.add-product')
//     fo.style.display='block'
// })
  //重新渲染商品列表
  showProductList()
addProduct()
onTotalPrice() 
onProduct()



/**
 * 获取m-n之间的随机数
 * @param {*} m
 * @param {*} n
 * @returns
 */
function getRandom(m, n) {
    var max = Math.max(m, n)
    var min = Math.min(m, n)
    return Math.floor(Math.random() * (max - min) + min)
}